<template>
	<view class="web">
		<view class="g_top">
		   <view class="back" @click="backto">
		    <u-icon name="arrow-left" color="#ffffff" size="25"></u-icon>
		   </view>
		   <view class="g_title">
		    我的回答
		   </view>
		  </view>
		<view class="header" v-show='!b'>
			<view class="open">
				<p>开通我的回答，邀请朋友向你提问</p>
				<p>回答被他人偷偷听，您可持续获得收入</p>
			</view>
			<view class="btn">
				<u-button type="success" @click='gotoapply'>申请开通我的“回答”</u-button>
			</view>
			<view class="total">
				<span>总收入￥0.00</span>
				<!-- <span> </span> -->
				<span>总收益￥0.00</span>
			</view>
			<view class="span">
				<span>注：收入90%归您，每天结算，自动存入微信红包</span>
			</view>
		</view>
		
		
		
		<view class="header1" v-show="b">
			<view class="top">
				<view class="open">
					<p>开通我的回答，邀请朋友向你提问</p>
					<p>回答被他人偷偷听，您可持续获得收入</p>
				</view>
				<view class="btn">
					<u-button :plain="true">成功开通我的“回答”</u-button>
				</view>
				<view class="total">
					<span>总收入￥0.00</span>
					<!-- <span> </span> -->
					<span>总收益￥0.00</span>
				</view>
				<view class="span">
					<span>注：收入90%归您，每天结算，自动存入微信红包</span>
				</view>
			</view>
			<view class="tabs">
				 <el-tabs v-model="activeName" @tab-click="handleClick">
				    <el-tab-pane label="已回答" name="first">
						<view class="fenlei_pinglun">
						   <view class="pinglun_tou">
						    <img class="tou_img" src="../../static/psx/tou.png" alt="">
						    <p class="tou_p1">张妈妈</p >
						    <p class="tou_p2">来自分裂:孕期</p >
						   </view>
						   <p class="pinglun_text">
								崔老师，最近每天都要做多重任务，每个任务都很重要，感觉身体不适，应当怎样缓解?
						   </p >
						   <view class="" style="width: 100%;height: 80upx;">
						    <view class="pinglun_yuyin">
						     <view class="yuyin_ting">
						      <img class="ting_img" src="../../static/psx/yu.png" alt="">
						      <!-- <p class="ting_p">一元偷偷听</p > -->
						     </view>
						     <img class="yuyin_img" src="../../static/psx/doc.png" alt="">
						    </view>
						   </view>
						  </view>
					</el-tab-pane>
				    <el-tab-pane label="待回答" name="second">
						<view class="fenlei_pinglun">
						   <view class="pinglun_tou">
						    <img class="tou_img" src="../../static/psx/tou.png" alt="">
						    <p class="tou_p1">张妈妈</p >
						    <p class="tou_p2">来自分裂:孕期</p >
						   </view>
						   <p class="pinglun_text">
								崔老师，最近每天都要做多重任务，每个任务都很重要，感觉身体不适，应当怎样缓解?
						   </p >
						   <view class="" style="width: 100%;height: 80upx;">
						    <view class="pinglun_yuyin">
						     <view class="yuyin_ting">
						      <img class="ting_img" src="../../static/psx/yu.png" alt="">
						      <p class="ting_p">点击说话</p >
						     </view>
						     <img class="yuyin_img" src="../../static/psx/doc.png" alt="">
						    </view>
						   </view>
						  </view>
					</el-tab-pane>
				    <el-tab-pane label="未回答" name="third">
						<view class="fenlei_pinglun">
						   <view class="pinglun_tou">
						    <img class="tou_img" src="../../static/psx/tou.png" alt="">
						    <p class="tou_p1">张妈妈</p >
						    <p class="tou_p2">来自分裂:孕期</p >
						   </view>
						   <p class="pinglun_text">
								崔老师，最近每天都要做多重任务，每个任务都很重要，感觉身体不适，应当怎样缓解?
						   </p >
						   <view class="" style="width: 100%;height: 80upx;">
						    <view class="pinglun_yuyin">
						     <view class="yuyin_ting1">
						      <img class="ting_img" src="../../static/psx/yu.png" alt="">
						      <p class="ting_p">已经过期</p >
						     </view>
						     <img class="yuyin_img" src="../../static/psx/doc.png" alt="">
						    </view>
						   </view>
						  </view>
					</el-tab-pane>
				  </el-tabs>
			</view>
		</view>
	</view> 
</template>

<script>
	export default {
		data() {
			return {
				b:false,
				activeName: 'first',
				list:[],
			}
		},
		created() {
			this.$api.getpsxapply().then(res=>{
				// console.log(this.res.data)
				this.list=res.data
				console.log(this.list.length)
				if(this.list.length==0){
					this.b=false
				}else if(this.list.length==1){
					this.b=!this.b
				}
			})
			
		},
		methods: {
			gotoapply(){
				uni.navigateTo({
					url: '/pages/person/apply'
				})
			},
			backto() {
			    uni.switchTab({
			     url: '/pages/person/person'
			    })
			   },
			handleClick(tab, event) {
			        // console.log(tab, event);
			      }
		}
	}
</script>

<style scoped>
.web{
	width: 100%;
	height:1246upx;
	background-color: ghostwhite;
}
.header{
	/* margin-top: 60upx; */
	width: 100%;
	height: 400upx;
	background-color: white;
}
.open {
	margin-top: 50upx;
	width:100%;
	/* height: 100upx; */
	color:gray;
	text-align: center;
}
.btn button{
	width: 60%;
	margin-top: 30upx;
}
.total{
	width: 100%;
	text-align: center;
	font-weight: 300;
	margin-top: 30upx;
}
.total span{
	font-size: 40upx;
}
.span{
	width:100%;
	text-align: center;
	font-size: 24upx;
	color:gray;
	margin-top: 30upx;
}

.header1{
	/* margin-top: 60upx; */
	width: 100%;
	height: 470upx;
	background-color: white;
}
.top{
	width: 100%;
	padding-bottom: 20upx;
	border-bottom: 1px solid lightgray;
}

/deep/.el-tabs__nav-scroll {
    overflow: hidden;
    display: flex;
    justify-content: space-evenly;
}
/deep/.el-tabs__nav-wrap::after{
	background-color: white
}
/deep/.el-tabs__item.is-active {
    color: limegreen;
}
/deep/.el-tabs__active-bar {
	background-color: white;
}


.fenlei_pinglun {
  height: 260upx;
  /* margin-top: 30upx; */
  padding: 30upx;
  background-color: white;
 }

 .pinglun_tou {
  width: 100%;
  height: 80upx;
  display: flex;
  align-items: center;
 }
.g_top {
  width: 100%;
  height: 88rpx;
  background-color: #26282e;
  display: flex;
  align-items: center;
 }

 .g_title {
  font-weight: bold;
  font-size: 32rpx;
  letter-spacing: 0rpx;
  color: #fafafa;
  margin: auto;
 }

 .back {
  width: 20rpx;
 }
 .tou_img {
  width: 80upx;
  height: 80upx;
 }

 .tou_p1 {
  margin: 0 30upx 0 30upx;
 }

 .tou_p2 {
  color: gray;
 }

 .pinglun_text {
  margin: 10upx 0 10upx 0;
  letter-spacing: .1rem;
 }

 .pinglun_yuyin {
  width: 450upx;
  height: 80upx;
  float: right;
  display: flex;
  justify-content: space-between;
  align-items: center;
 }

 .yuyin_ting {
  width: 350upx;
  height: 60upx;
  border-radius: 35upx;
  background-color: #8FC31F;
  position: relative;
  top: 0;
  left: 0;
 }

 .yuyin_img {
  width: 80upx;
  height: 80upx;
 }

 .ting_img {
  width: 25upx;
  height: 35upx;
  position: absolute;
  top: 15upx;
  left: 30upx;
 }

 .ting_p {
  text-align: center;
  line-height: 60upx;
  color: white;
 }

 .yuyin_ting1 {
  width: 350upx;
  height: 60upx;
  border-radius: 35upx;
  background-color: gainsboro;
  position: relative;
  top: 0;
  left: 0;
 }
</style>
